<template>
	<div class="edit-session-summary-container">
		<div class="dialog-title">
			<div class="button-wrapper">
				<!-- <el-button v-show="canEdit"  type="primary" size="mini" @click="handleSave">保存</el-button> -->
				<el-button type="primary" size="mini" @click="handleClose">返回</el-button>
			</div>
		</div>
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="会话小结" name="sessionSummary">
				<div v-show="canEdit">
					<el-button type="text" icon="el-icon-circle-plus-outline" @click="handleAdd">添加字段</el-button>
				</div>
				<div class="content-wrapper">
					<el-form label-position="left" class="demo-form-inline">
						<SummaryItem
							v-for="(item, index) in summaryList"
							:key="index"
							:index="index"
							:type="item.type"
							:label="item.name"
							:options="item.data.options || []"
							:required="item.isRequired === 'Y'"
							@edit="handleEdit"
							@delete="handleDelete"
							@required-change="handleRequiredChange"
							:canEdit="canEdit"
						/>
					</el-form>
				</div>
			</el-tab-pane>
		</el-tabs>

		<CreateSummaryItem v-if="showCreateSummaryItem" :visible="showCreateSummaryItem" :data="curEditItem" @close="showCreateSummaryItem = false" @save="handleCreate" @update="handleCreate" :summaryList="summaryList"/>
	</div>
</template>

<script>
import SummaryItem from '@/components/Summary/SummaryItem.vue';
import CreateSummaryItem from '@/components/Summary/CreateSummaryItem.vue';
import { getSessionSummaryList, deleteSessionSummary, updateSessionSummary } from '@/api/api';

export default {
	components: { SummaryItem, CreateSummaryItem },
	props: {
		visible: {
			type: Boolean,
			required: true,
			default: () => false
		},
		showDetail: {
			type: Boolean,
			default: () => false,
			required: true
		}
	},
	data() {
		return {
			canEdit: false,
			activeName: 'sessionSummary',
			showCreateSummaryItem: false,
			curEditItem: null,
			summaryList: []
		};
	},
	computed: {},
	mounted() {
		this.canEdit = this.$route.query.canEdit !== 'false';
		this.getSessionSummaryList();
	},

	methods: {
		handleSave() {
			// TODO: API
			this.$router.go(-1);
		},
		// 关闭新增工作流模态框
		handleClose() {
			this.$router.go(-1);
		},
		handleAdd() {
			this.curEditItem = null;
			this.showCreateSummaryItem = true;
		},
		handleCreate(data) {
			console.log('handleCreate data', data, this.curEditItem);
			if (this.curEditItem) {
				this.$set(this.summaryList, this.curEditItem.index, data); // 确保响应性更新
			} else {
				// add
				this.summaryList.push({ ...data });
			}
			this.showCreateSummaryItem = false;
		},
		handleEdit(index) {
			console.log('handleEdit index', index);
			this.curEditItem = { ...this.summaryList[index], index: index };
			this.showCreateSummaryItem = true;
		},
		handleDelete(index) {
			console.log('handleDelete index', index);
			this.$confirm('此操作将删除该字段, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.deleteSessionSummary(index, this.summaryList[index].id);
				})
				.catch(() => {
					
				});
		},
		handleRequiredChange(data) {
			console.log('handleRequiredChange', data);
			const { index, required } = data;
			this.updateRequired(index, required);
		},
		getSessionSummaryList() {
			getSessionSummaryList(this.$route.params.id)
			.then(res => {
				console.log('getSessionSummaryList res', res.data);
				this.summaryList = res.data.data.map(item => {
					return {
						id: item.id,
						type: item.type,
						name: item.name,
						isRequired: item.isRequired,
						data: item.data || {},
					};
				});
			})
			.catch(err => {
				console.log('getSessionSummaryList err', err);
				this.$message.error('获取会话小结失败');
			});
		},
		deleteSessionSummary(index, id) {
			deleteSessionSummary(this.$route.params.id, id)
			.then(res => {
				console.log('deleteSessionSummary res', res);
				this.summaryList.splice(index, 1);
			})
			.catch(err => {
				console.log('deleteSessionSummary err', err);
				this.$message.error('删除失败');
			});
		},
		updateRequired(index, isRequired) {
			const data = this.summaryList[index];
			data.isRequired = isRequired ? 'Y' : 'N';
			updateSessionSummary(this.$route.params.id, data.id, data)
				.then(res => {
					console.log('updateSessionSummary res', this.summaryList[index]);
					this.$nextTick(() => {
						this.$set(this.summaryList[index], 'isRequired', isRequired ? 'Y' : 'N');
					})
				})
				.catch(err => {
					console.log('updateSessionSummary err', err);
					this.$message({
						message: '更新失败',
						type: 'error'
					});
				});
		}
	}
};
</script>

<style lang="less" scoped>
.edit-session-summary-container {
	position: relative;

	.dialog-title {
		display: flex;
		justify-content: flex-end;
		width: 100%;
		align-items: center;
		position: absolute;
		top: 0;
		z-index: 1;
	}

	.content-wrapper {
		padding: 10px;
	}
}
</style>

<style lang="less">
.edit-session-summary-container {
	.el-dialog__body {
		padding-top: 0;
	}
}
</style>
